<template>
	<view>
		<view class=" white_b  car-nav">
			<view class="padding-15 flex_left_right align_center">

				<view class="align_center">
					<text class=" bold">购物车</text>
					<text class="fs-11 gray_font"
						style="padding:10rpx 0 0 10rpx;">{{itemList.length?itemList.length+'件商品':''}}</text>
				</view>
				<view class="fs-13 gray_font" style="padding:10rpx 0 0">
					<!-- <text v-if="edit" @click="edit=false">编辑</text> -->
					<text @click="delterGood">删除</text>
				</view>

			</view>
		</view>
		<view style="height: 88rpx;"></view>
		<view class="shopcart" v-if="itemList.length!=0">
			<view class="good-num white_b">
				<view>
					<view v-for="(item,index) in itemList" :key="index" class="align_center sign-good">
						<text class="iconfont" :class="item.checked?'icondanxuanfuxuan':'iconico2'"
							:style="{'color':item.checked?'#FF7133':'#999',fontSize:'40rpx'}"
							@click="selectCheck(index)"></text>
						<view class="my_profile flex flex-full">
							<view class="shelf" v-if="item.status!=1">商品暂时已下架</view>
							<view class="photo">
								<image class="good_img"
									:src="item.goods.main_image==''?imgRemote+config.item_default:imgRemote+item.goods.main_image"
									mode="widthFix"></image>
							</view>

							<view class="info">
								<view class="operate flex">
									<view style="width:86%;" @click="detail">
										<view class="fs-13  two-line">{{item.goods.name}}</view>
									</view>
								</view>
								<view class="flex_left_right">
									<view style="width:82%;" @click="detail">
										<view class="hidden">
											<text class="red_font fs-18 bold">¥{{item.sku.market_price}}</text>
											<text class="gray_font">/{{item.sku.unit}}</text>
										</view>
									</view>

									<my-stepper :val="item.buy_num" :disabled="item.sku.bei_num?true:false"
										@minus="minus(index)" @input="input" :index="index" @plus="plus(index)">
									</my-stepper>
								</view>
							</view>

						</view>

					</view>
				</view>
				<view class="flex_left_right go-bill fs-11" v-if="feeInfo.over>totalPrice">
					<view> 实付满{{feeInfo.over}}元免运费，还差
						<text class="red-font">{{$fixed(Math.abs(totalPrice-feeInfo.over))}}</text>元
					</view>
					<navigator open-type="switchTab" url="/pages/tabar/classify">
						<view class="red-font align_center">
							<text>去凑单</text>
							<text class="iconfont iconfanhui t-180 bold"></text>
						</view>
					</navigator>
				</view>
			</view>
			<view class="new-order">
				<view class="flex_left_right submit white_b">
					<view class="align_center">
						<text class="iconfont" :class="allCheck?'icondanxuanfuxuan':'iconico2'"
							:style="{'color':allCheck?'#FF7133':'#999',fontSize:'40rpx'}" @click="allCheckGood"></text>

						<text class="fs-15" style="margin-left:10rpx;">全选</text>
					</view>
					<view class="align_center">
						<view @click="setShow">
							<text class="fs-13 gray_font"> 合计：</text>
							<text class="fs-18 red-font">￥{{tj.hj}}</text>
							<text class="fs-18 red-font mx" v-if="tj.hj">明细</text>
							<u-icon style="margin-left: 5rpx;" v-if="tj.hj&&!show" name="arrow-up" size="22"
								color="#FF7133"></u-icon>
							<u-icon style="margin-left: 5rpx;" v-if="show" name="arrow-down" size="22"
								color="#FF7133"></u-icon>
						</view>
						<text class="fs-15 gray_font  pay-button" :class="settlement?'go-settle':'in-go-settle'"
							@click="shoplist">去结算</text>

					</view>
				</view>
			</view>
			<view style="height:69px;"></view>
		</view>
		<view v-else class="null_cart">
			<view class="null_img">
				<image :src="imgRemote+'/assets/img/none_cart.png'" mode="widthFix"></image>
				<view class="fs-15 gray_font" style="margin:0 0 40rpx;">购物车里空空如也~</view>
				<view class="go-shopping" @click="toUrl()">去逛一逛</view>
			</view>
			<view class="recomend" v-if="recommendList.length!=0">
				<view class="title">
					<text class="name align_center">猜你喜欢</text>
				</view>
				<view class="body">
					<my-recomend v-for="(item, index) in recommendList" :key="index" :ware="item" class="myc_recomend">
					</my-recomend>
				</view>
				<view style="height: 30rpx;"></view>
			</view>
		</view>


		<u-popup v-model="show" :mask-close-able="true" z-index="50" :mask="false" mode="bottom" border-radius="14"
			:closeable="true" close-icon-pos="top-right">
			<view class="m_msg_box">

				<view class="m_msg_title">明细</view>

				<view class="b_f_s">
					<view>商品金额</view>
					<view>￥{{tj.total}}</view>
				</view>



				<view class="b_f_s" v-if="tj.freight">
					<view>配送费</view>
					<view>￥{{tj.freight}}</view>
				</view>





			</view>
		</u-popup>

	</view>
</template>

<script>
	const app = getApp().globalData;
	const {
		imgRemote
	} = app;

	export default {
		components: {

		},
		data() {
			return {
				nullcart: '',
				imgRemote: imgRemote,
				edit: true,
				page: 1,
				cartitem: [],
				itemList: [],
				settlement: false,
				allCheck: false,
				recommendList: [],
				totalPrice: '',
				feeInfo: '',
				tj: {},
				show: false,
				fc: '',
				admin_id:0

			};
		},
		methods: {
			toUrl(){
				if(this.admin_id){
					uni.navigateTo({
						url:'/pages/zb/info?id='+this.admin_id
					})
				}else{
					uni.navigateTo({
						url:'/pages/tabar/shop'
					})
				}
				
			},
			setShow() {
				console.log(1);
				if (this.tj && this.tj.hj && !this.show) {
					this.show = true;
				} else {

					this.show = false;
				}

			},
			set() {

				let selectGoods = this.itemList.filter((item) => {
					return item.checked == true
				})

				let ids = [];

				selectGoods.forEach(e => {
					ids.push(e.id);
				});

				this.$post(this.$api.setOrder, {
					ids: ids.join(','),
					token: uni.getStorageSync('userToken')
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.tj = data.data;
					}
				});
			},
			async calculate() {
				await this.set();
			},
			/* calculate() {
				let sum = 0;
				for (let i of this.itemList) {
					if (i.checked) {
						sum += i.buy_num * i.sku.market_price;
					}
				}
				this.totalPrice = sum;
				return this.totalPrice;
			}, */
			delterGood() {
				let that = this;
				if (that.settlement) {
					that.$showModal('确定要删除选中商品吗？', () => {
						let ids = '';

						for (let i of that.itemList) {
							if (i.checked == true) {
								ids += i.id + ','
							}
						}
						let newId = ids.substring(0, ids.length - 1)
						let params = {
							token: uni.getStorageSync('userToken'),
							cart_id: newId
						}
						that.$get(that.$api.cartdel_cart, params, res => {
							let data = res.data;
							if (data.code == 1) {
								that.$Toast('删除成功');
								that.cartIndex();
							} else {
								that.$Toast(data.msg);
							}
						});
					})
				} else {
					if (that.itemList.length == 0) {
						that.$Toast('购物车暂时无商品');
					} else {
						that.$Toast('没有选中商品哦');
					}
				}
			},
			selectCheck(index) {
				if (index >= 0) {
					this.itemList[index].checked = !this.itemList[index].checked;
					if (this.itemList[index].status != 1 && this.edit == true) {
						this.itemList[index].checked = false;
					}
				}
				this.settlement = this.itemList.some((item) => {
					return item.checked == true;
				})
				this.allCheck = this.itemList.every((item) => {
					return item.checked == true;
				})
				this.calculate();
			},
			allCheckGood() {
				this.allCheck = !this.allCheck;
				this.itemList.map((item) => {
					if (this.edit == true) {
						if (item.status != 1) {
							item.checked = false;
						} else {
							item.checked = this.allCheck;
						}
					} else {
						item.checked = this.allCheck;
					}
					return item;
				})
				this.selectCheck();
			},
			shoplist() {

				if (this.settlement) {
					let selectGoods = this.itemList.filter((item) => {
						return item.checked == true
					})

					let ids = [];
					selectGoods.forEach(e => {
						ids.push(e.id);
					});

					uni.setStorageSync('selectGoods', ids.join(','));
					uni.navigateTo({
						url: "/pages/shopcart/shoplist"
					})
				} else {
					this.$Toast('没有选中商品哦')
				}
			},
			cartIndex() {
				this.$get(this.$api.cartIndex, {
					token: uni.getStorageSync('userToken'),
					admin_id:this.admin_id
				}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						// data.data.map((item) => {
						// 	// item.checked = true;
						// 	if (item.status != 1) {
						// 		item.checked = false;
						// 	}
						// 	return item;
						// })
						this.itemList = data.data;
						this.fc = data.msg;
						this.calculate();
					}
				})
			},
			//猜你喜欢
			likeGood() {
				let {
					num,
					page
				} = this;
				this.$get(this.$api.goodsUser_like, {admin_id:this.admin_id}, res => {
					let data = res.data;
					if (data.code == 1) {

						this.recommendList = data.data;
					}
				});
			},
			updateCart(id, num) {
				let params = {
					token: uni.getStorageSync('userToken'),
					cart_id: id,
					buy_num: num
				};
				this.$get(this.$api.update_cart_num, params, res => {
					let data = res.data;
					if (data.code == 1) {
						//this.$Toast('成功更新购物车数量');
						this.calculate();
					} else {

						this.$Toast(data.msg);
						this.cartIndex();
					}
				});
			},
			plus(index) {
				if (this.itemList[index].status == 1) {
					this.itemList[index].buy_num += this.itemList[index].sku.bei_num ? this.itemList[index].sku.bei_num :
						1;
				}
				let indexGood = this.itemList[index];
				this.updateCart(indexGood.id, indexGood.buy_num);
			},
			input(e) {
				let index = e.index;
				if (e.value) {

					if (this.itemList[index].sku.bei_num) {
						if ((e.value % this.itemList[index].sku.bei_num) > 0) {

							let val = e.value / this.itemList[index].sku.bei_num * this.itemList[index].sku.bei_num;
							if (val < 1) {
								this.itemList[e.index].buy_num = 1;
							} else {
								this.itemList[e.index].buy_num = val;
							}

							this.$Toast('必须是' + this.itemList[index].sku.bei_num + '的倍数');

						} else {
							this.itemList[e.index].buy_num = e.value;
						}
					} else {
						this.itemList[e.index].buy_num = e.value;
					}


				} else {
					this.itemList[e.index].buy_num = parseFloat(0);
				}

				let indexGood = this.itemList[e.index];

				this.updateCart(indexGood.id, indexGood.buy_num);
			},
			minus(index) {
				let indexGood = this.itemList[index];
				if (indexGood.status == 1) {

					if (indexGood.buy_num == indexGood.sku.bei_num) {
						indexGood.buy_num = indexGood.sku.bei_num;
						return
					}

					if (indexGood.buy_num == 1) {
						indexGood.buy_num = 1;
						return
					}
					indexGood.buy_num -= indexGood.sku.bei_num ? indexGood.sku.bei_num :
						1;

				}

				this.updateCart(indexGood.id, indexGood.buy_num)
			},
			//邮费
			getFreight() {
				this.$get(this.$api.mainFreight, {}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.feeInfo = data.data;
					}
				});
			},
		},
		onShow() {
			this.show = false;
			uni.removeStorageSync('quanInfo');
			uni.removeStorageSync('address');
			this.edit = true;
			this.allCheck = false;
			this.settlement = false;
			//this.getFreight();
			if (uni.getStorageSync('userToken')) {
				this.cartIndex();
			} else {
				getApp().globalData.isReload = true;
				uni.reLaunch({
					url: '../account/wxlogin'
				})
			}
			this.likeGood();
		},
		onLoad(e) {
			if(e.admin_id){
				this.admin_id=e.admin_id;
			}
		}
	};
</script>

<style scoped lang="scss">
	.prices {
		font-size: 25rpx;
	}

	page {
		background: #f8f8f8;
	}

	/deep/ .my_stepper {
		margin: 0 !important;
		width: 160rpx !important;
	}

	.car-nav {
		height: 88rpx;
		line-height: 88rpx;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 5;
	}

	.good-num {
		border-radius: 10rpx;
		margin: 30rpx 30rpx 0rpx 30rpx;
		padding-bottom: 30rpx;

		.check-button {
			margin: 0 20rpx 0 0;
		}

		.sign-good {

			// padding: 10rpx 0;

			margin: 0rpx 20rpx;

			&:nth-last-child(n+2) {
				border-bottom: 1px solid #eee;

			}
		}

		.go-bill {
			padding: 20rpx;
			margin: 0 20rpx 0rpx 20rpx;
			background: #eee;
			border-radius: 10rpx;
		}

	}

	.new-order {
		position: fixed;
		bottom: 0px;
		width: 100%;
		z-index: 9;

		.submit {
			padding: 30rpx 30rpx;
			//height: 98rpx;
		}

		.in-go-settle {
			background: #eee;
			margin-left: 30rpx;
		}

		.go-settle {
			color: white;
			background: #e34b0f;
			margin-left: 30rpx;
		}
	}

	.single_good {
		flex: 1;
	}

	/deep/ .my_profile {
		padding: 0;

		.add_cart {
			margin: 0;
		}
	}

	.recomend .title .name {

		&:before {
			content: '';
			display: inline-block;
			width: 150rpx;
			height: 4rpx;
			background: linear-gradient(to left, #FF7133, rgba(255, 179, 12, 0.3));
			margin-right: 20rpx;
		}

		&:after {
			content: '';
			display: inline-block;
			width: 150rpx;
			height: 4rpx;
			background: linear-gradient(to right, #FF7133, rgba(255, 179, 12, 0.3));
			margin-left: 20rpx;
		}
	}

	.null_img {
		text-align: center;

		image {
			width: 60%;
			margin-top: 60rpx;
		}

		.go-shopping {
			width: 256rpx;
			height: 70rpx;
			line-height: 70rpx;
			color: white;
			background: #e34b0f;
			border-radius: 35rpx;
			margin: 0 auto 50rpx;
		}
	}

	.my_profile {

		background: white;

		.shelf {
			position: absolute;
			color: #e34b0f;
			font-size: 80rpx;
			transform: rotate(-5deg);
			margin: 60rpx 0 0 30rpx;
		}
	}

	.my_profile .photo {

		/* width: 180rpx; */

	}

	.my_profile .good_img {
		margin: 29rpx;
		border-radius: 10rpx;
		width: 180rpx;
		height: 180rpx;
	}

	.my_profile .info {
		flex: 1;
		display: flex;
		padding: 29rpx 0;
		flex-direction: column;
		justify-content: space-between;
	}

	.my_profile .operate {
		height: 100%;
		justify-content: space-between;
	}

	.my_profile .add_cart {
		width: 44.4rpx;
		height: 44.4rpx;
		background: #1677fe;
		text-align: center;
		line-height: 44.4rpx;
		border-radius: 50%;
		color: white;
		margin: -20rpx 30rpx 0 0;
	}

	.my_profile .showToast {
		position: fixed;
		margin: auto;
		left: 0;
		right: 0;
		top: 12px;
		bottom: 0;
		width: 200rpx;
		height: 30rpx;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 10rpx;
		padding: 15rpx;
		color: white;
	}

	.mx {
		font-size: 26rpx;
		margin-left: 5rpx;
	}

	.m_msg_box {
		box-sizing: border-box;
		padding: 25rpx 15rpx 20rpx 15rpx;
		font-weight: bold;
	}

	.m_msg_title {
		width: 100%;
		text-align: center;
	}

	.b_f_s {
		margin-top: 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/deep/ .u-drawer-bottom {
		bottom: 99rpx !important;
	}

	.yj_title {
		text-align: center;
		font-weight: bold;
	}

	.yjimg {
		width: 180rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.yjboxs {
		box-sizing: border-box;
		padding: 0 0 10rpx 60rpx;
	}

	.yjnum {
		margin-left: 30rpx;
	}
</style>